<template>
  <div class="warp" v-if="ck">
    <div class="form-row">
      <div class="form-row-label">金额(元)</div>
      <div class="form-row-content">
        {{formData.je}}
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">数量</div>
      <div class="form-row-content">
        {{formData.sl}}
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">销售单位</div>
      <div class="form-row-content">
        {{formData.dw}}
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">订单说明</div>
      <div class="form-row-content">
        {{formData.wp}}
      </div>
    </div>
    <div class="jes">￥{{formData.je}}</div>

    <navigator open-type="exit" target="miniProgram">
      <button class="button" type="primary"
              :loading="saveLoading" @click="saveData('xx')">线下支付确认
      </button>
    </navigator>
    <button class="button" type="primary"
            :loading="saveLoading" @click="saveData">支付宝在线支付
    </button>
    <div class="tip">点击确认会弹出获取用户授权码发起支付~</div>
    <!--    <navigator open-type="exit" target="miniProgram">关闭小程序</navigator>-->
  </div>
</template>

<script>
  import store from '@/store/store'

  export default {
    computed: {
      companyId () {
        return store.state.companyId
      }
    },
    data () {
      return {
        saveLoading: false,
        authCode: 'null',
        ck: false,
        formData: {
          je: null,
          wp: null,
          sl: null,
          ddid: '',
          // 订单ID 唯一ID
          wyid: null,
          dw: null
        }
      }
    },
    methods: {
      onGetAuthorize (res) {
        this.mpvue.getAuthCode({
          scopes: 'auth_user',
          fail: (res) => {
          },
          success: (res) => {
            this.authCode = res.authCode
          }
        })
      },
      goTo () {
        const url = '/pages/exitPg/index'
        this.mpvue.navigateTo({url})
      },
      saveData (str) {
        const url = store.state.server + '/auth/addOrder'
        let obj = Object.assign({}, this.formData)
        this.saveLoading = true
        this.mpvue.request({
          url: url,
          data: {
            authCode: this.authCode,
            orderData: JSON.stringify(obj)
          },
          success: (res) => {
            const {data} = res
            if (data.flag === true) {
              this.formData = {
                je: null,
                wp: null,
                sl: null,
                ddid: '',
                dw: null
              }
              if (str !== 'xx') {
                this.goTo()
              }
            } else {
              this.mpvue.alert({
                content: data.msg
              })
            }
            this.saveLoading = false
          },
          fail: (error) => {
            this.mpvue.alert({
              content: error.errorMessage
            })
            this.saveLoading = false
          }
        })
      },
      checkDd () {
        let url = store.state.server + '/auth/verifyOrder'
        this.mpvue.request({
          url: url,
          data: {
            orderID: this.formData.ddid
          },
          success: (res) => {
            const {data} = res
            this.ck = data.flag
            if (this.ck === false) {
              this.goTo()
            }
          },
          fail: (error) => {
            this.mpvue.alert({
              content: error.errorMessage
            })
          }
        })
      }
    },

    mounted () {
      // let app = getApp()
    },
    onLoad (opts) {
      this.formData = opts
      console.log(JSON.stringify(this.formData))
      store.commit('setBuyer', true)
      this.onGetAuthorize()
      this.checkDd()
    },
    onUnload () {
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/common";


  div {
    box-sizing: border-box;
  }

  .bs {
    margin: 10px 0;
  }

  .warp {
    display: flex;
    background-color: #f3f3f3;
    height: 100vh;
    width: 100vw;
    padding: 20px 15px;
    flex-direction: column;
    box-sizing: border-box;

    .pasn {
      margin-bottom: 20px;
    }

    .imgs {
      width: 300px;
      height: 380px;
    }
  }
</style>

<style scoped lang="scss">
  div {
    box-sizing: border-box;
  }

  .bs {
    margin: 10px 0;
  }

  .warp {
    display: flex;
    background-color: #f3f3f3;
    height: 100vh;
    width: 100vw;
    padding: 20px 15px;
    flex-direction: column;
    box-sizing: border-box;

    .form-row {
      display: flex;
      align-items: center;
      color: rgb(51, 51, 51);
      font-size: 16px;
      border-radius: 4px;
      margin: 5px 0;
      background-color: #fff;
      padding: 12px 10px;
      border-bottom: 0.5px solid #f5f5f5;


      .form-row-label {
        width: 90px;
        margin-bottom: 1px;
        font-size: 16px;
        color: #7d7d7d;
      }

      .form-row-content {
        flex: 1;
        display: flex;

        .input {
          padding: 4px 8px 4px 0;
          font-size: 12px;
          flex: 1;
        }
      }
    }

    .hhd {
      background-color: rgba(221, 221, 221, 0.25);
      border: 1px solid #fff;
    }

    .cxso {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: cornflowerblue;
      font-size: 14px;
      background-color: #ffffff;
      margin-bottom: 1px;
      font-weight: bold;
    }
  }

  .radio {
    display: block;
    margin-bottom: 20px;
  }

  .radio-text {
    line-height: 1.8;
  }

  .jes {
    font-weight: bold;
    font-size: 26px;
    margin: 30px 0;
    font-family: sans-serif;
  }

  .tip {
    margin-top: 5px;
    color: #656565;
    font-size: 12px;
  }

  .button {
    margin: 10px 0;
  }
</style>
